<template>
  <div class="play-page-footer">
    <div class="progress">
      <span>{{currentTimexx}}</span>
      <input
        type="range"
        v-model="value"
        :min="0"
        :max="duration"
        @input="inputing = true"
        @change="
          inputing = false;
          $emit('update:currentTime', value);
        "
      />
      <span>{{durationxx}}</span>
      <div class="bg">
        <div
          class="bar"
          :style="{ width: `${(value / duration) * 100}%` }"
        ></div>
      </div>
    </div>
    <div class="footer-bottom">
      <ul>
        <li>
          <span class="iconfont icon-liebiaoxunhuan"></span>
        </li>
        <!-- 上一首 -->
        <li>
          <span
            @click.stop="$emit('prev-song')"
            class="iconfont icon-shangyishoushangyige"
          ></span>
        </li>
        <!-- 播放、暂停 -->
        <li>
          <span
            class="iconfont icon-zanting"
            v-if="playing"
            @click.stop="$emit('audio-pause-handler')"
          ></span>
          <span
            class="iconfont icon-bofang"
            v-else
            @click.stop="$emit('audio-play-handler')"
          ></span>
        </li>
        <!-- 下一首 -->
        <li>
          <span
            @click.stop="$emit('next-song')"
            class="iconfont icon-xiayigexiayishou"
          ></span>
        </li>
        <!-- 列表按钮 -->
        <li>
          <span
            class="iconfont icon-caidan"
            @click.stop="$parent.$parent.showMyPlayList = true"
          ></span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    playing: Boolean,
    currentTime: Number,
    duration: Number,
  },
  data() {
    return {
      value: this.currentTime,
      inputing: false,
    };
  },
  computed: {
    currentTimexx: function () {
      var min = parseInt(this.currentTime / 60);
      min = min > 10 ? min : "0" + min;
      var sec = parseInt(this.currentTime % 60);
      sec = sec > 10 ? sec : "0" + sec;
      return min + ":" + sec;
      // return min 
    },
    durationxx:function(){
      var min = parseInt(this.duration / 60);
      min = min > 10 ? min : "0" + min;
      var sec = parseInt(this.duration % 60);
      sec = sec > 10 ? sec : "0" + sec;
      return min + ":" + sec;
    }
  },
  watch: {
    currentTime: function (n) {
      if (!this.inputing) {
        this.value = n;
      }
    },
  },
};
</script>

<style lang="less">
.play-page-footer {
  // background: red;
  .progress {
    margin: 0 30px;
    position: relative;
    height: 20px;
    display: flex;
    span {
      font-size: 12px;
      &:nth-child(1) {
        margin-left: -35px;
        margin-top: -4px;
        color: rgba(255, 255, 255, 0.4);
      }
      &:nth-child(3) {
        margin-right: -35px;
        margin-top: -4px;
        color: rgba(255, 255, 255, 0.2);
      }
    }
    input {
      width: 100%;
      height: 20px;
      opacity: 0;
      margin: 0 10px;
    }
    .bg {
      width: 100%;
      height: 5px;
      background: rgba(255, 255, 255, 0.3);
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      .bar {
        width: 10%;
        height: 100%;
        background: rgba(255, 255, 255, 0.5);
        position: relative;

        &::before {
          content: "";
          position: absolute;
          right: 0;
          top: 0;
          width: 5px;
          height: 100%;
          background: rgba(255, 255, 255, 1);
          margin-right: -5px;
          border-radius: 50%;
        }
      }
    }
  }
  .footer-bottom {
    ul {
      list-style: none;
      display: flex;
      justify-content: space-between;
      align-items: center;
      li {
        span {
          font-size: 30px;
          color: rgba(255, 251, 240, 0.7);
        }
        &:nth-child(3) {
          span {
            font-size: 50px;
            color: rgba(255, 251, 240, 0.9);
          }
        }
      }
    }
  }
}
</style>